<template>
  <div class="product">
    <div class="btn">
      <el-select
        v-model="searchValue"
        filterable
        clearable
        remote
        @change="searchTextChange"
        reserve-keyword
        @clear="clear"
        placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
        :remote-method="remoteMethod"
        :loading="loading"
      >
        <el-option
          v-for="item in searchList"
          :key="item.sId"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button
        icon="el-icon-search"
        type="primary"
        plain
        @click="searchBtn"
      ></el-button>
      <el-button @click="addStu" v-has="'add'" type="primary"
        >添加项目</el-button
      >
    </div>
    <!-- 选择器 -->
    <div class="select">
      <el-form>
        <el-form-item label="选择班级：">
          <el-select
            v-model="classes"
            filterable
            placeholder="请选择"
            @visible-change="classVisible"
            @change="classChange"
          >
            <el-option label="全部" value="all"></el-option>
            <el-option
              v-for="(item, index) in classList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 导出excel -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel1" @click="exportExcel"
        >导出excel数据</el-button
      >
    </div>
    <!-- 学员表格 -->
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="headimgurl" label="头像" width="80" align="center">
        <template v-slot="scope">
          <el-avatar
            shape="square"
            :size="50"
            fit="fill"
            :src="scope.row.headimgurl"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="class" label="班级" width="120" align="center">
      </el-table-column>
      <el-table-column
        prop="productUrl"
        label="项目"
        width="200"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="cTime" label="创建时间" width="180" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template v-slot="{ row }">
          <el-button
            @click="
              $router.push(
                { path: '/studentManager/profile' },
                handleClick(row)
              )
            "
            icon="el-icon-view"
            type="primary"
            size="small"
            plain
            v-has="'read'"
            >查看</el-button
          >
          <el-button
            @click="edit(row)"
            icon="el-icon-edit"
            type="primary"
            size="small"
            plain
            v-has="'edit'"
            >编辑</el-button
          >
          <el-button
            @click="del(row)"
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
            v-has="'delete'"
            >删除</el-button
          >
        </template>
        <!-- 分页器 -->
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      @current-change="changePage"
      :page-size="stuPageSize"
      :total="stuTotal"
    >
    </el-pagination>
    <qf></qf>
  </div>
</template>
<script>
import * as api from "../../../../api/";
import dialog from "../../../../components/Dialog";
import { mapState, mapActions, mapMutations } from "vuex";
import qee from "qf-export-excel";
export default {
  components: {
    qf: dialog,
  },
  computed: {
    ...mapState(["tableData", "loading", "stuTotal", "stuPageSize"]),
  },
  data() {
    return {
      input: "",
      restaurants: [],
      state: "",
      timeout: null,
      classList: [],
      classes: "",
      searchList: [],
      searchValue: "",
      currentPage: 1,
    };
  },
  created() {
    this.GET_TABLEDATA();
  },
  methods: {
    ...mapMutations([
      "SHOW_DIALOG",
      "SET_TITLE",
      "SET_NOWROW",
      "SET_TABLEDATA",
    ]),
    ...mapActions(["GET_TABLEDATA"]),
    handleClick(row) {
      this.SET_NOWROW(row);
    },
    del(row) {
      // console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.delStuApi(row.sId).then((res) => {
            console.log(res);
            if (res.data.state) {
              //删除成功
              this.GET_TABLEDATA(); //更新列表
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              //删除失败 这条数据已经被别人删除了
              this.$message.error("删除失败,数据不存在");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
    edit(row) {
      this.SET_TITLE("修改学员信息");
      this.SHOW_DIALOG();
      this.SET_NOWROW(row);
    },
    addStu() {
      this.SET_TITLE("增加学员信息");
      this.SHOW_DIALOG();
    },
    querySearch() {},
    handleSelect() {},
    classVisible(isVisible) {
      if (isVisible) {
        //下拉框出现了 此时需要发送请求 获取班级列表
        api.classApi().then((res) => {
          this.classList = res.data.data;
        });
      }
    },
    //选择班级
    classChange(query) {
      //当query等于all的时候，表示需要展示所有的班级
      if (query === "all") {
        //将query重新赋值为空，因为不传的话，后台就会默认返回所有的值
        query = "";
      }
      this.GET_TABLEDATA({ classes: query });
    },
    changePage(page) {
      // console.log(page);
      // console.log(this.searchValue);
      if (this.searchValue) {
        api.searchStuApi(page, this.searchValue, null).then((res) => {
          this.SET_TABLEDATA(res.data);
          //  this.GET_TABLEDATA(res.data);
        });
      } else {
        this.GET_TABLEDATA({ page });
      }
    },

    searchTextChange(searchText) {
      // console.log(searchText);
      api.searchStuApi(null, searchText, null).then((res) => {
        this.currentPage = 1;
        // console.log(this.currentPage)
        this.SET_TABLEDATA(res.data);
      });
    },
    clear() {
      this.currentPage = 1;
      // console.log(this.currentPage)
    },
    searchBtn() {
      // console.log(this.searchValue);
      api.searchStuApi(null, this.searchValue, null).then((res) => {
        this.currentPage = 1;
        this.SET_TABLEDATA(res.data);
      });
    },
    remoteMethod(query) {
      // console.log(query);
      this.searchValue = query;
      api.searchStuApi(null, query, null).then((res) => {
        let newarr = [];
        for (let i = 0; i < res.data.data.length; i++) {
          let flag = true;
          for (let j = 0; j < newarr.length; j++) {
            if (newarr[j].name === res.data.data[i].name) {
              flag = false;
              break;
            }
          }
          if (flag) {
            newarr.push(res.data.data[i]);
          }
        }
        this.searchList = newarr;
      });
    },
    exportExcel() {
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "学历",
          key: "degree",
        },
        {
          title: "班级",
          key: "class",
        },
        {
          title: "项目地址",
          key: "productUrl",
        },
        {
          title: "创建事件",
          key: "cTime",
        },
      ];
      qee(titleList, this.tableData, "班级信息");
    },
  },
};
</script>
<style lang="less" scoped>
.product {
  .btn {
    text-align: left;
    padding: 20px 0;
    /deep/el-input__inner {
      display: inline-block;
      width: 300px;
    }
  }
  el-dropdown {
    display: block;
    text-align: left;
  }
  .select {
    text-align: left;
  }
  .exportExcel {
    text-align: right;
    color: gray;
    button {
      border-radius: 4px;
      padding: 4px 7px;
    }
    /deep/i {
      font-size: 25px;
      color: deepskyblue;
    }
  }
}
</style>
